<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind CSS 测试</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            success: '#52C41A',
            primary: '#165DFF',
            secondary: '#36CFC9',
            warning: '#FAAD14',
            danger: '#FF4D4F',
          },
        },
      }
    }
  </script>
</head>
<body class="bg-gray-900 text-white min-h-screen p-8">
  <h1 class="text-3xl font-bold mb-6">Tailwind CSS 颜色测试</h1>
  
  <div class="grid grid-cols-5 gap-4 mb-8">
    <div class="w-16 h-16 bg-primary rounded-lg flex items-center justify-center text-white font-bold">
      主色
    </div>
    <div class="w-16 h-16 bg-secondary rounded-lg flex items-center justify-center text-white font-bold">
      辅色
    </div>
    <div class="w-16 h-16 bg-success rounded-lg flex items-center justify-center text-white font-bold">
      成功
    </div>
    <div class="w-16 h-16 bg-warning rounded-lg flex items-center justify-center text-white font-bold">
      警告
    </div>
    <div class="w-16 h-16 bg-danger rounded-lg flex items-center justify-center text-white font-bold">
      危险
    </div>
  </div>
  
  <div class="w-24 h-24 bg-success rounded-lg mx-auto mb-4"></div>
  <p class="text-center text-gray-300">如果上方方块显示为绿色，则 bg-success 类正常工作</p>
</body>
</html>